<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Qiniu JavaScript DEMO</title>
    <style>
        #previews {
            border: 5px dashed #DDD;
            width: 80%;
            height: 30em;
            padding: 1em;
            margin: 2em 1em;
        }
    </style>
</head>
<body>
<button id="select">SELECT</button>
<div id="previews"></div>

<button id="select2">SELECT</button>
</body>

<script src="http://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="/static/home/js/qiniu.js"></script>
<script>
    (function ($) {
        var images = qiniu.bucket(
            'qiniu-sdk-test',
            {
                putToken: '{$token}',
                url: 'https://img.lingyun.pro/',
            }
        );

        qiniu.bind($('#select'), {filter: 'image'})
            .bind.dnd($('#previews'), {filter: 'image'})
            .on('over', function () {
                document.getElementById('previews').style.border = '5px dashed #999';
            })
            .on('file', function (file) {
                document.getElementById('previews').style.border = '5px dashed #DDD';
                file.imageView({
                    mode: 1,
                    width: 200,
                    height: 200
                }, function (err, image) {
                    if (err) {
                        if (progress) {
                            progress.innerHTML = 'Error';
                        }
                        return;
                    }

                    var wrapper = document.createElement('span');
                    wrapper.style.float = 'left';

                    var progress = document.createElement('p');
                    wrapper.appendChild(progress);
                    wrapper.appendChild(image);

                    document.getElementById('previews').appendChild(wrapper);

                    images.putFile(file.name, file, {
                        before: function (xhr, key, file, options) {
                            progress.innerHTML = file.name;
                        },

                        progress: function (precent, loaded, total) {
                            progress.innerHTML = file.name + ' : ' + precent.toFixed(2) + '%';
                        }
                    }, function (err, reply) {
                        if (err) {
                            return progress.innerHTML = 'Error';
                        }

                        var asset = images.key(file.name);

                        progress.innerHTML = file.name + ' : Done <a href="' + asset.url() + '" target="_blank">Link</a>';
                    });
                });

            });
    })(jQuery);
</script>

</html>